<!-- @format -->
<script setup>
	import { ref } from 'vue'
	// 自我介绍
	const intro = ref('')

	//  收集城市
	const city = ref('SH')

	// 收集血型
	const blood = ref('ab')

	// 是否同意用户协议
	const isAgree = ref(false)

	// 收集爱好
	const hobby = ref(['ZQ', 'PB'])
</script>

<template>
	<div>
		<!-- 文本域 -->
		<textarea
			v-model="intro"
			cols="30"
			rows="4"
			placeholder="请输入自我介绍"></textarea>

		<br />
		<br />
		<!-- 下菜菜单 -->
		<select v-model="city">
			<option value="BJ">北京</option>
			<option value="SH">上海</option>
			<option value="SZ">深圳</option>
			<option value="HZ">杭州</option>
		</select>
		<br />
		<br />
		<!-- 单选框：多个当中只能选择一个，需要给单选框手动添加 value 属性 -->
		<input
			type="radio"
			value="a"
			v-model="blood" />A
		<input
			type="radio"
			value="b"
			v-model="blood" />B
		<input
			type="radio"
			value="ab"
			v-model="blood" />AB
		<input
			type="radio"
			value="o"
			v-model="blood" />O

		<br />
		<br />
		<input
			type="checkbox"
			v-model="isAgree" />是否同意用户协议

		<br />
		<br />
		<input
			v-model="hobby"
			type="checkbox"
			value="LQ" />篮球
		<input
			v-model="hobby"
			type="checkbox"
			value="ZQ" />足球
		<input
			v-model="hobby"
			type="checkbox"
			value="YMQ" />羽毛球
		<input
			v-model="hobby"
			type="checkbox"
			value="PPQ" />乒乓球
		<br />
		<input
			v-model="hobby"
			type="checkbox"
			value="PB" />跑步
		<input
			v-model="hobby"
			type="checkbox"
			value="YY" />游戏
		<input
			v-model="hobby"
			type="checkbox"
			value="PLT" />普拉提
		<input
			v-model="hobby"
			type="checkbox"
			value="LDW" />拉丁舞
	</div>
</template>

<style scoped></style>
